﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <title>wasm</title>
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <script src="Cesium/Cesium.js"></script>
    <style>
        @import url(Cesium/Widgets/widgets.css);
    </style>
</head>
<body>
    <app></app>

    <script src="_framework/blazor.webassembly.js"></script>

    <!--
    <div id="map" style="width: 100%; height: 50vh;"></div>


    <div id="cesiumContainer" style="width: 100%; height: 50vh;"></div>
    -->
    <script>
        /*
        var worker = new Worker("websocketworker.js");

        worker.onmessage = function (e) {
            try {
                eval(e.data);
            } catch (err) {
                console.log(err);
            }
            //console.log('Message received from worker');
        }
        */
        function initWebSocket() {
            if (window["WebSocket"]) {
                var host = "ws://" + window.location.hostname + ":56781/websocket/raw";
                //if (window.location.hostname == "")
                host = "ws://localhost:56781/websocket/raw";
                try {
                    try {
                        if (!(socket === null))
                            socket.close();
                    } catch (exception) {
                        if (window.console) console.log(exception);
                    }
                    var blobToBase64 = function (blob, cb) {
                        var reader = new FileReader();
                        reader.onload = function () {
                            var dataUrl = reader.result;
                            var base64 = dataUrl.split(',')[1];
                            cb(base64);
                        };
                        reader.readAsDataURL(blob);
                    };
                    try {
                        dotNetDispatcherInvokeMethodHandle = Blazor.platform.findMethod(
                            'wasm',
                            'wasm.Pages',
                            'websocket',
                            'ProcessPacketStatic');
                        dotNetDispatcherInvokeMethodHandle2 = Blazor.platform.findMethod(
                            'wasm',
                            'wasm.Pages',
                            'websocket',
                            'ProcessPackets'
                        );
                    } catch (err) {
                        return;
                    }
                    socket = new WebSocket(host);

                    window.onbeforeunload = function () {
                        socket.close();
                    };
                    console.log('WebSocket - status ' + socket.readyState);
                    socket.onopen = function (msg) {

                    };
                    socket.onmessage = function (msg) {
                        blobToBase64(msg.data,
                            function (base64data) {
                                thingo = Blazor.platform.toDotNetString(base64data);

                                result = Blazor.platform.callMethod(dotNetDispatcherInvokeMethodHandle,
                                    null,
                                    [thingo]);


                                //console.log(Blazor.platform.toJavaScriptString(result));
                            });
                    };
                } catch (exception) {
                    if (window.console) console.log(exception);
                }
            }
        }

        function websocketsend(data) {
            socket.send(data);
        }

        $(document).ready(function () {
            setTimeout(function () {

                
                setInterval(function () {
                    Blazor.platform.callMethod(dotNetDispatcherInvokeMethodHandle2, null, {});
                }, 100);

                /*
                initMap();

                //var test = SOCKFS.createSocket(2, 1, 6);
                worker.postMessage({'cmd': 'init', 'data': window.location.hostname,
                    //'test1': Blazor.platform.toDotNetString,
                    //'test2': Blazor.platform.callMethod,
                    //'test3': Blazor.platform.findMethod
                });
                */
                //test.sock_ops.connect(test, "127.0.0.1/websocket/raw", 56781);
            }, 2000);
        });

    </script>


    <script>
        var map;
        var viewer;
        var markers = [];

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'),
                {
                    center: { lat: -35, lng: 117.89 },
                    zoom: 1,
                    mapTypeId: 'satellite',
                    maxZoom: 21
                });

            //map.setMapTypeId('satellite');

            //map.setOptions({maxZoom: 21});

            viewer = new Cesium.Viewer('cesiumContainer');

            var terrainProvider = Cesium.createWorldTerrain({
                requestWaterMask: true
            });
            viewer.terrainProvider = terrainProvider;

            markers = [];
        }

        function setPosition(mavno, lat, lng, altasl) {
            if (lat == 0 || lng == 0)
                return;
            var myLatLng = { lat: lat, lng: lng };
            if (markers.length >= (mavno + 1)) {
                markers[mavno].setPosition(myLatLng);
                if (map != markers[mavno].map)
                    markers[mavno].setMap(map);
            } else {
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: 'ArduPilot ' + mavno
                });
                markers.push(marker);
            }
            if (mavno === 0) {
                if (map.zoom < 2) {
                    map.setCenter({ lat: lat, lng: lng });
                    map.setZoom(16);
                    //viewer.camera.zoomTo(Cesium.Cartesian3.fromDegrees(lng, lat, altasl));
                }
            }

            if (viewer) {
                var pinBuilder = new Cesium.PinBuilder();

                if (viewer.entities.values.length >= (mavno + 1)) {
                    viewer.entities.values[mavno].position =
                        Cesium.Cartesian3.fromDegrees(myLatLng.lng, myLatLng.lat, altasl);
                } else {
                    // add a new one
                    var entity = viewer.entities.add({
                        name: 'ArduPilot ' + viewer.entities.values.length,
                        position: Cesium.Cartesian3.fromDegrees(myLatLng.lng, myLatLng.lat, altasl),
                        billboard: {
                            image: pinBuilder.fromText(viewer.entities.values.length, Cesium.Color.BLACK, 48)
                                .toDataURL(),
                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                        }
                    });

                    viewer.trackedEntity = entity;
                }
            }
        }

        function testlog(mavlist) {
            console.log(mavlist);
        }





            //map.setCenter({lat: cs.lat, lng: cs.lng});

            //&callback=initMap
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDW05vWXeNIfZAN4Ter8gf4YLg8rPHZToc" async defer></script>

    <script src="http://smoothiecharts.org/smoothie.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


</body>
</html>
